<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-box">
			<view class="search-input-wrap">
				<view class="location">
					<text>北京</text>
					<uni-icons type="bottom" size="12" color="#666"></uni-icons>
				</view>
				<view class="search-input">
					<uni-icons type="search" size="16"></uni-icons>
					<input type="text" placeholder="找工作、找房子" />
				</view>
			</view>
		</view>
		
		<!-- 分类导航 -->
		<view class="category-wrap">
			<swiper class="category-swiper" :indicator-dots="true" indicator-color="rgba(0,0,0,.1)" indicator-active-color="#ff552e">
				<swiper-item>
					<view class="nav-item" v-for="(item, index) in categoryList" :key="index" @tap="navigateToCategory(item)">
						<image :src="item.icon" mode="aspectFit"></image>
						<text>{{ item.name }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 广告位 -->
		<view class="ad-banner">
			<image src="https://pic1.58cdn.com.cn/nowater/webim/big/n_v2f6bf4a5786d84f838f83f4c3b51f79ea.png" mode="widthFix"></image>
		</view>
		
		<!-- 推荐信息列表 -->
		<view class="recommend-title">
			<text class="title">猜你喜欢</text>
		</view>
		<view class="info-list">
			<view class="info-item" v-for="(item, index) in infoList" :key="index" @tap="viewDetail(item)">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="info-content">
					<text class="title">{{ item.title }}</text>
					<view class="tags" v-if="item.tags">
						<text v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</text>
					</view>
					<text class="price">¥{{ item.price }}</text>
					<text class="address">{{ item.address }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const categoryList = ref([
	{ name: '房产', icon: 'https://img.58cdn.com.cn/weixin/r/main/house.png' },
	{ name: '招聘', icon: 'https://img.58cdn.com.cn/weixin/r/main/job.png' },
	{ name: '二手', icon: 'https://img.58cdn.com.cn/weixin/r/main/ershou.png' },
	{ name: '服务', icon: 'https://img.58cdn.com.cn/weixin/r/main/service.png' },
])

const infoList = ref([
	{
		title: '整租·2室1厅·70㎡',
		price: '2300',
		address: '海淀区·西二旗',
		
		image: 'https://pic3.58cdn.com.cn/anjuke_58/2ee7265822088a7c6a3b2c9cc1f7e7c0?w=240&h=180'
	},
	{
		title: '急招销售经理',
		price: '8000',
		address: '朝阳区·望京',
		image: 'https://pic1.58cdn.com.cn/nowater/webim/big/n_v2780eb365e4c94217b4c07f499fcfcd02.jpg'
	},
	{
		title: '九成新iPhone 13',
		price: '4999',
		address: '东城区·东直门',
		image: 'https://pic6.58cdn.com.cn/nowater/webim/big/n_v2c98d5bdf20b54f3597b0ee1bfd11a5d7.jpg'
	}
])

const navigateToCategory = (item) => {
	uni.navigateTo({
		url: `/pages/category/category?type=${item.name}`
	})
}

const viewDetail = (item) => {
	uni.navigateTo({
		url: `/pages/detail/detail`
	})
}
</script>

<style scoped>
.container {
	background-color: #f8f8f8;
}

.search-box {
	background-color: #fff;
	padding: 20rpx 30rpx;
	position: sticky;
	top: 0;
	z-index: 100;
}

.search-input-wrap {
	display: flex;
	align-items: center;
}

.location {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
	font-size: 28rpx;
	color: #333;
}

.search-input {
	background-color: #f5f5f5;
	border-radius: 30rpx;
	padding: 10rpx 20rpx;
	display: flex;
	align-items: center;
	flex: 1;
}

.search-input input {
	margin-left: 10rpx;
	font-size: 26rpx;
}

.category-wrap {
	background-color: #fff;
	padding: 20rpx 0 30rpx;
}

.category-swiper {
	height: 360rpx;
}

.nav-item {
	width: 25%;
	float: left;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 0;
}

.nav-item image {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.nav-item text {
	font-size: 24rpx;
	color: #333;
}

.ad-banner {
	padding: 20rpx 30rpx;
	background: #fff;
}

.ad-banner image {
	width: 100%;
	border-radius: 12rpx;
}

.recommend-title {
	padding: 30rpx;
	background: #fff;
	margin-top: 20rpx;
}

.recommend-title .title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	position: relative;
	padding-left: 20rpx;
}

.recommend-title .title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6rpx;
	height: 30rpx;
	background: #ff552e;
	border-radius: 3rpx;
}

.info-list {
	margin-top: 20rpx;
	background: #fff;
	padding: 0 30rpx;
}

.info-item {
	display: flex;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
}

.info-item image {
	width: 200rpx;
	height: 150rpx;
	margin-right: 20rpx;
	border-radius: 8rpx;
}

.info-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.info-content .title {
	font-size: 28rpx;
	margin-bottom: 10rpx;
	font-weight: 500;
	color: #333;
}

.info-content .tags {
	display: flex;
	margin-bottom: 10rpx;
}

.info-content .tags text {
	font-size: 22rpx;
	color: #ff552e;
	background: rgba(255,85,46,.1);
	padding: 2rpx 10rpx;
	border-radius: 4rpx;
	margin-right: 10rpx;
}

.info-content .price {
	color: #ff552e;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.info-content .address {
	color: #999;
	font-size: 24rpx;
}
</style>
